<template>
  <div class="risk-analysis">
    <!-- 高血压风险分析 -->
    <div class="content" v-if="type == 1">
      <div class="header">
        <svg-icon name="风险分析" />
        <span class="inline-block">高血压风险分析</span>
      </div>
      <van-collapse v-model="active" :border="false">
        <div class="collapse-box">
          <van-collapse-item title="风险分层" :border="false" name="1">
            <div class="collapse-content">
              <div class="riskLayer-content">
                <div
                  v-if="healthReport.highBloodPressureInfo.riskLayer"
                  :class="[
                    'riskLayer',
                    healthReport.highBloodPressureInfo.riskLayer === '正常'
                      ? 'normal'
                      : 'danger'
                  ]"
                >
                  {{ healthReport.highBloodPressureInfo.riskLayer }}
                </div>
                <span v-else> 未分层 </span>
                <div
                  class="reason"
                  v-if="healthReport.highBloodPressureInfo.reason"
                >
                  {{ healthReport.highBloodPressureInfo.reason }}
                </div>
              </div>
            </div>
          </van-collapse-item>
        </div>

        <div class="collapse-box">
          <van-collapse-item title="心血管危险因素" :border="false" name="2">
            <div class="collapse-content">
              <span
                class="inline-block"
                v-for="(item, index) in healthReport.highBloodPressureInfo
                  .riskFactors"
                :key="index"
                >{{ `${item}、` }}</span
              >
              <span
                v-if="
                  healthReport.highBloodPressureInfo.riskFactors.length === 0
                "
                >无</span
              >
            </div>
          </van-collapse-item>
        </div>
        <div class="collapse-box">
          <van-collapse-item title="靶器官损害" :border="false" name="3">
            <div class="collapse-content">
              <span
                class="inline-block"
                v-for="(item, index) in healthReport.highBloodPressureInfo
                  .targetOrgansDamage"
                :key="index"
                >{{ `${item}、` }}</span
              >
              <span
                v-if="
                  healthReport.highBloodPressureInfo.targetOrgansDamage
                    .length === 0
                "
                >无</span
              >
            </div>
          </van-collapse-item>
        </div>
        <div class="collapse-box">
          <van-collapse-item title="高血压并发症" :border="false" name="4">
            <div class="collapse-content">
              <div
                v-for="(item, i) in healthReport.highBloodPressureInfo
                  .complication"
                :key="item.typeName"
                class="complication"
              >
                <div v-show="i < 2" class="complication-item">
                  <div class="type-name">
                    {{ item.typeName }}
                    测试name
                  </div>
                  <div class="disease">
                    <li v-for="(clid, index) in item.disease" :key="index">
                      {{ clid.diseaseName }}({{ clid.determainTime }})
                    </li>
                  </div>
                </div>
                <CollapseTransition>
                  <div v-show="isUnfold && i >= 2" class="complication-item">
                    <div class="type-name">
                      {{ item.typeName }}
                      测试name
                    </div>
                    <div class="disease">
                      <li v-for="(clid, index) in item.disease" :key="index">
                        {{ clid.diseaseName }}({{ clid.determainTime }})
                      </li>
                    </div>
                  </div>
                </CollapseTransition>
              </div>
              <div
                class="operate"
                v-if="
                  healthReport.highBloodPressureInfo.complication.length > 2
                "
              >
                <span
                  :class="[
                    'inline-block isUnfold',
                    isUnfold ? 'is-active' : ''
                  ]"
                  @click="isUnfold = !isUnfold"
                  >{{ isUnfold ? '收起' : '查看更多' }}
                  <van-icon name="arrow-up" :class="isUnfold ? '' : 'active'" />
                </span>
              </div>
              <div
                v-if="
                  healthReport.highBloodPressureInfo.complication.length == 0
                "
              >
                无
              </div>
            </div>
          </van-collapse-item>
        </div>
        <div class="collapse-box">
          <van-collapse-item title="相关病史" :border="false" name="5">
            <div class="collapse-content">
              <span
                class="inline-block"
                v-for="(item, index) in healthReport.highBloodPressureInfo
                  .relateMedHistory"
                :key="index"
                >{{ `${item}、` }}</span
              >
              <span
                v-if="
                  !healthReport.highBloodPressureInfo.relateMedHistory ||
                  healthReport.highBloodPressureInfo.relateMedHistory.length ===
                    0
                "
                >无</span
              >
            </div>
          </van-collapse-item>
        </div>
      </van-collapse>
    </div>
    <!-- 高血压风险分析end -->
    <!-- 糖尿病风险分析 -->
    <div class="content" v-else>
      <div class="header">
        <svg-icon name="风险分析" />
        <span class="inline-block">糖尿病风险分析</span>
      </div>
      <van-collapse v-model="active" :border="false">
        <div class="collapse-box">
          <van-collapse-item title="糖尿病风险分层" :border="false" name="1">
            <div class="collapse-content">
              <div class="riskLayer-content">
                <div
                  v-if="healthReport.diabetesMellitusInfo.riskLayer"
                  :class="[
                    'riskLayer',
                    healthReport.diabetesMellitusInfo.riskLayer === '正常'
                      ? 'normal'
                      : 'danger'
                  ]"
                >
                  {{ healthReport.diabetesMellitusInfo.riskLayer }}
                </div>
                <span v-else> 未分层 </span>
                <div
                  class="reason"
                  v-if="healthReport.diabetesMellitusInfo.reason"
                >
                  {{ healthReport.diabetesMellitusInfo.reason }}
                </div>
              </div>
            </div>
          </van-collapse-item>
        </div>
        <div class="collapse-box">
          <van-collapse-item title="糖尿病危险因素" :border="false" name="2">
            <div class="collapse-content">
              <span
                class="inline-block"
                v-for="(item, index) in healthReport.diabetesMellitusInfo
                  .riskFactors"
                :key="index"
                >{{ `${item}、` }}</span
              >
              <span
                v-if="
                  healthReport.diabetesMellitusInfo.riskFactors.length === 0
                "
                >无</span
              >
            </div>
          </van-collapse-item>
        </div>
        <div class="collapse-box">
          <van-collapse-item title="糖尿病并发症" :border="false" name="3">
            <div class="collapse-content">
              <div
                v-for="(item, i) in healthReport.diabetesMellitusInfo
                  .complication"
                :key="item.typeName"
                class="complication"
              >
                <div v-show="i < 2" class="complication-item">
                  <div class="type-name">
                    {{ item.typeName }}
                  </div>
                  <div class="disease">
                    <li v-for="(clid, index) in item.disease" :key="index">
                      {{ clid.diseaseName }}({{ clid.determainTime }})
                    </li>
                  </div>
                </div>
                <CollapseTransition>
                  <div v-show="isUnfold && i >= 2" class="complication-item">
                    <div class="type-name">
                      {{ item.typeName }}
                      测试name
                    </div>
                    <div class="disease">
                      <li v-for="(clid, index) in item.disease" :key="index">
                        {{ clid.diseaseName }}({{ clid.determainTime }})
                        <!-- 测试数据 （2021-03-14） -->
                      </li>
                    </div>
                  </div>
                </CollapseTransition>
              </div>
              <div
                class="operate"
                v-if="healthReport.diabetesMellitusInfo.complication.length > 2"
              >
                <span
                  :class="[
                    'inline-block isUnfold',
                    isUnfold ? 'is-active' : ''
                  ]"
                  @click="isUnfold = !isUnfold"
                  >{{ isUnfold ? '收起' : '查看更多' }}
                  <van-icon name="arrow-up" :class="isUnfold ? '' : 'active'" />
                </span>
              </div>
              <div
                v-if="
                  healthReport.diabetesMellitusInfo.complication.length == 0
                "
              >
                无
              </div>
            </div>
          </van-collapse-item>
        </div>

        <div class="collapse-box">
          <van-collapse-item title="相关病史" :border="false" name="4">
            <div class="collapse-content">
              <span
                class="inline-block"
                v-for="(item, index) in healthReport.diabetesMellitusInfo
                  .relateMedHistory"
                :key="index"
                >{{ `${item}、` }}</span
              >
              <span
                v-if="
                  !healthReport.diabetesMellitusInfo.relateMedHistory ||
                  healthReport.highBloodPressureInfo.relateMedHistory.length ===
                    0
                "
                >无</span
              >
            </div>
          </van-collapse-item>
        </div>
      </van-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import CollapseTransition from '@/components/CollapseTransition/index.vue' // 折叠面板

export default defineComponent({
  name: 'RiskAnalysis',
  components: { CollapseTransition },
  setup() {
    const store = useStore()
    const { query } = useRoute()
    const state = reactive({
      isUnfold: false, // 查看更多
      active: ['1'],
      type: query.type,
      healthReport: computed(() => {
        return JSON.parse(store.state.healthReport)
      })
    })

    return {
      ...toRefs(state)
    }
  }
})
</script>

<style lang="scss" scoped>
.risk-analysis {
  height: 100vh;
  background: #fff;
  padding: 10px 16px;
  .content {
    height: 100%;
    background: #ffeeeb;
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
    .header {
      padding-bottom: 16px;
      span {
        font-size: 16px;
        font-weight: 500;
        color: #070707;
        padding-left: 8px;
      }
    }
    .collapse-box {
      margin-bottom: 20px;
      .collapse-content {
        padding: 12px 0 0;
        .riskLayer-content {
          div {
            display: inline;
          }
          .riskLayer {
            color: #333333;
            padding: 3px 5px;
            border-radius: 4px;
            margin-right: 5px;
            font-size: 13px;
            &.danger {
              color: #ff4b25;
              background: rgba(255, 73, 37, 0.1);
            }
            &.normal {
              color: #04e396;
              background: #dafbef;
            }
          }
          .reason {
            color: #999999;
            font-size: 14px;
          }
        }
        .complication {
          .complication-item {
            display: flex;
            font-size: 14px;
            padding-bottom: 8px;
            .type-name {
              min-width: 75px;
              color: #333333;
              display: inline-block;
              padding-right: 5px;
            }
            .disease {
              color: #999999;
              li {
                padding-bottom: 6px;
                list-style: auto;
                &:last-child {
                  padding: 0;
                }
              }
            }
          }
        }
        .operate {
          text-align: center;
          color: #999999;
          font-size: 12px;
          padding-top: 10px;
          .isUnfold {
            margin-left: 15px;
            i {
              font-size: 12px;
              transition: all 0.5s;
              &.active {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.risk-analysis {
  .van-collapse-item__content {
    padding: 0;
    background-color: transparent;
  }
  .van-collapse-item {
    .van-cell {
      background: rgba(255, 98, 66, 0.6);
      border-radius: 8px 8px;
      padding: 10px 16px;
      color: #fff;
      .van-cell__right-icon {
        color: #fff;
      }
    }
  }
}
</style>
